<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    全選<input type="checkbox" name="" id="allBtn">
    2<input type="checkbox" class="ck" name="" id="">
    3<input type="checkbox" class="ck" name="" id="">
    4<input type="checkbox" class="ck" name="" id="">
    5<input type="checkbox" class="ck" name="" id="">
    6<input type="checkbox" class="ck" name="" id="">
</body>
<script>
    // 獲取元素 註冊事件
    let allBtn = document.getElementById('allBtn');
    let sonBtn = document.querySelectorAll('.ck');
    // console.log(sonBtn);
    allBtn.onclick = function () {
        if (allBtn.checked) {
            // 点击全选按钮 全部按钮被勾选 
            for (let i = 0; i < sonBtn.length; i++) {
                sonBtn[i].checked = true;
            }
        } else {
            // 全选按钮不勾选 全部按钮不勾选 
            for (let i = 0; i < sonBtn.length; i++) {
                sonBtn[i].checked = false;
            }
        }
    }
    // 所有子选项被勾选的话全部按钮也被选择 否则就不选择
    sonBtn.forEach(function (e) {
        e.onclick = function () {
            // 先假设全部为勾选
            let allSelect = true;
            sonBtn.forEach(function (e) {
                // 只要有任意个子选项不勾选 就是 false
                if (e.checked === false) {
                    allSelect = false;
                    return;
                }
            })
            // 只要 全部选上 就是true
            if (allSelect === true) {
                allBtn.checked = true;
            } else {
                allBtn.checked = false;
            }
        }
    })
</script>

</html>